<template>
    <div class="wrap">
        <b-header :goLogin="true">
            <div>
                <router-link to="/bookCity">书城</router-link>
                <router-link to="/bookShelf">书架</router-link>
            </div>
        </b-header>
        <div class="con">
            <swiper :options="options" class="swiper-banner">
                <swiper-slide v-for="(item,i) in swiperData" :key="i">
                    <img :src="item.ad_pic_url" alt="">
                </swiper-slide>
            </swiper>
            <div class="hot">
                <b-dl v-for="(item,index) in hotData" :key="index" 
                    :title="item.title"
                    :url="item.cover"
                    :id="item.fiction_id"
                ></b-dl>
            </div>
        </div>
    </div>
</template>
<script>
import bHeader from '../components/bHeader'
import bDl from '../components/bDl'

import 'swiper/dist/css/swiper.css'
 
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
    components:{
        bHeader,
        swiper,
        swiperSlide,
        bDl
    },
    data(){
        return {
            options:{
                autoplay:true
            },
            swiperData:[],
            hotData:[]
        }
    },
    created(){
        this.$http.get('/api/home').then(res => {
            if(res.data.code === 1){
                console.log(res.data)
                this.swiperData = res.data.data.items[0].data.data;
                this.hotData = res.data.data.items[1].data.data;
                console.log(this.swiperData)
            }
        })
    }
}
</script>
<style>
    .wrap{
        width:100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .swiper-banner img{
        width:100%;
    }
    .hot{
        width:100%;
        padding:10px;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
    }
</style>

